import React, { useState, useRef } from "react";
import style from "./accountcustomer.module.scss";
import { Button, Select } from "antd";
import { ProTable } from "@ant-design/pro-components";
import AddCustomerAccount from "../../components/AddCustomerAccount";
import CheckCustomerAccount from "../../components/CheckCustomerAccount";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next

export default function AccountCustomer() {
  const actionRef = useRef();
  const refData = localStorage.getItem("i18nextLng");
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  // 点击修改时传递数据到回显
  const [echoData, setEchoData] = useState({});
  const { Option } = Select;

  // 修改开关
  const showDrawer = () => {
    setEchoData({});
    setOpen(true);
  };
  // 修改开关
  const onClose = (value) => {
    setOpen(value);
  };

  // 查看开关

  const showCheckDrawer = () => {
    setCheckOpen(true);
  };
  const onCheckClose = (value) => {
    setCheckOpen(value);
  };

  const columns = [
    {
      title: () => <>{t("form.accountTitle")}</>,
      // title: "账户名称",
      dataIndex: "largeAmount",
      key: "largeAmount",
      align: "center",
      render: (text) => <a>{text}</a>,
    },
    {
      title: () => <>{t("form.BankCardNo")}</>,

      dataIndex: "largeAmountsa",
      key: "largeAmountsa",
      align: "center",
      hideInTable: true,
    },
    {
      // title: "账户号码",
      title: () => <>{t("form.AccountNo")}</>,
      dataIndex: "currency",
      key: "currency",
      align: "center",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Bankname")}</>,
      // title: "银行名称",
      dataIndex: "money",
      key: "money",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "支行号",
      title: () => <>{t("form.PaymentbankNo")}</>,
      key: " serialNumber",
      dataIndex: "serialNumber",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "币种",
      title: () => <>{t("form.currency")}</>,
      key: " transaction",
      dataIndex: "transaction",
      align: "center",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.Country")}</>,
      // title: "国家",
      key: "billingTime",
      dataIndex: "billingTime",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "地区",
      title: () => <>{t("form.Region")}</>,
      key: " account",
      dataIndex: "serialNumber",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "城市",
      title: () => <>{t("form.City")}</>,
      key: " remarks",
      dataIndex: "remarks",
      align: "center",
      hideInSearch: true,
    },
    {
      title: () => <>{t("form.SpecificAddress")}</>,
      // title: "具体地址",
      key: " remarks",
      dataIndex: "remarks",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "状态",
      title: () => <>{t("form.State")}</>,
      key: " remarks",
      dataIndex: "remarks",
      align: "center",
    },
    {
      title: () => <>{t("form.Option")}</>,
      hideInSearch: true,
      // title: "操作",
      align: "center",
      dataIndex: "action",
      width: 180,
      render: (_, record) => {
        return (
          <>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setCheckOpen(true);
                // 给回显组件传递数据
              }}
            >
              {/* 查看 */}
              {t("buttons.Details")}
            </Button>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setOpen(true);
                // 给回显组件传递数据
                setEchoData(record);
              }}
            >
              {/* 修改 */}
              {t("buttons.Modify")}
            </Button>
          </>
        );
      },
    },
  ];

  const data = [
    {
      key: "1",
      largeAmount: "1",
      currency: "John Brown",
      money: 32,
      serialNumber: "New York No. 1 Lake Park",
      transaction: "wdw",
      remarks: "1dqwd",
    },
    {
      key: "2",
      largeAmount: "2",
      currency: "John Brown",
      money: 32,
      serialNumber: "New York No. 1 Lake Park",
      transaction: "wdw",
      remarks: "1dqwd",
    },
  ];
  return (
    <div className={style.AccountiDetailboss}>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        form={{ labelWrap: true }}
        request={async (params = {}, sort, filter) => {
          console.log("params", params, "sort", sort, "filter", filter);

          return {
            data: data,
          };
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          optionRender: ({ searchText, resetText }, { form }, dom) => [
            <Button
              key="searchText"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {t("buttons.query")}
            </Button>,
            <Button
              key="resetText"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {t("buttons.Reset")}
            </Button>,
          ],
          collapseRender: (collapsed, showCollapseButton) => {
            return collapsed ? (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 展开 */}
                {t("buttons.Open")}
              </Button>
            ) : (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 关闭 */}
                {t("buttons.Close")}
              </Button>
            );
          },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 8,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
        toolBarRender={() => [
          <Button key="button" type="primary" onClick={showDrawer}>
            {/* 新增  */}
            {t("buttons.Add")}
          </Button>,
        ]}
      />

      <AddCustomerAccount
        echoData={echoData} // 数据回显从表格传递的数据流
        open={open}
        showDrawer={showDrawer}
        onClose={onClose}
      />

      <CheckCustomerAccount
        checkOpen={checkOpen}
        showCheckDrawer={showCheckDrawer}
        onCheckClose={onCheckClose}
      />
    </div>
  );

  // <div className={style.AccountiDetailboss}>
  //   <div className={style.accountmineform}>
  //     <Row gutter={24}>
  //       <Form layout="inline" style={{ width: "100%" }}>
  //         <Col span={6}>
  //           <Form.Item label="用户名称">
  //             <Input placeholder="请输入用户名" />
  //           </Form.Item>
  //         </Col>
  //         <Col span={6}>
  //           <Form.Item label="银行卡号">
  //             <Input placeholder="请输入银行卡号" />
  //           </Form.Item>
  //         </Col>
  //         <Col span={6}>
  //           <Form.Item label="状态" style={{ textAlign: "left" }}>
  //             <Select>
  //               <Select.Option value="normal">正常</Select.Option>
  //               <Select.Option value="unnormal">待审核</Select.Option>
  //             </Select>
  //           </Form.Item>
  //         </Col>
  //         <Col span={6} style={{ textAlign: "right" }}>
  //           <Space size="small">
  //             <Button type="primary">查询</Button>
  //             <Button>重置</Button>
  //           </Space>
  //         </Col>
  //       </Form>
  //     </Row>
  //   </div>
  //   <div className={style.accountdetailtable}>
  //     <p style={{ width: "100%", display: "flex", marginBottom: "10px" }}>
  //       <Button type="primary " onClick={showDrawer}>
  //         新增
  //       </Button>
  //     </p>

  //     <Table
  //       columns={columns}
  //       size="middle"
  //       scroll={{
  //         x: 1000,
  //       }}
  //       pagination={{
  //         showSizeChanger: true,
  //         onChange: (page, pageSize) => {
  //           // console.log("page, pageSize", page, pageSize);
  //         },
  //         defaultPageSize: 8,
  //         showTitle: true,
  //         responsive: true,
  //       }}
  //       dataSource={data}
  //     />
  //   </div>

  // </div>
}
